import Vue from 'vue';
import Load from './load.vue';
//1、 通过Vue.extend接受参数并返回一个构造器
const Mask = Vue.extend(Load);

const toggleLoading = (el, binding) => {
    if (binding.value) {
        Vue.nextTick(() => {
            el.instance.visible = true; // 控制loading组件显示
            insertDom(el, el, binding); // 插入到目标元素
        });
    } else {
        el.instance.visible = false;
    }
};

const insertDom = (parent, el) => {
    parent.appendChild(el.mask);
};

export default {
    // bind(){}当绑定指令的时候出发
    bind: function (el, binding, vnode) {
        //2、 new Mask构造器可以返回一个组件实例
        const mask = new Mask({
            // 把该组件实例挂载到一个div上，但这个时候div还没有挂载到页面中
            el: document.createElement('div'),
            data() {},
        });
        // 用一个变量接住mask实例
        el.instance = mask;
        el.mask = mask.$el;
        el.maskStyle = {};
        binding.value && toggleLoading(el, binding);
        // 3.判断value是否为true，如果是true就执行toggleLoading，toggleLoading方法是用来控制显示组件中visible变量，并且如果value是true则插入到目标元素
    },
    // update(){}当数据更新时候会触发该函数
    update: function (el, binding) {
        if (binding.oldValue !== binding.value) {
            toggleLoading(el, binding);
        }
    },
    // unbind(){}解绑的时候触发该函数
    unbind: function (el, binding) {
        el.instance && el.instance.$destroy();
    },
};
